<template>
    <editComponent></editComponent>
</template>
<script setup lang="jsx">
import { defineProps, defineEmits, ref, onMounted, watch } from 'vue';
const props = defineProps(['data', 'header', 'value', 'options'])
const emits = defineEmits(['update:value', 'changed'])
// 值改变统一事件
const changed = () => {
    console.log(12313212)
    emits('changed', props.data)
}
const select = ref()
const selectChange = () => {
    const scoped = props.data
    scoped.row[scoped.column.property] = valueToLabel(select.value)
    scoped.row['select_' + scoped.column.property] = select.value
    emits('changed', props.data)
}
const valueToLabel = (value) => {
    return props.options.find(item => item.value === value).label
}
const editComponent = () => {
    const type = props.header.type
    return (
        <div>
            {type === 'input' && <el-input v-focus model-value={props.value} onInput={value => emits('update:value', value)} onBlur={changed}></el-input>}
            {type === 'select' && <el-select v-model={select.value} placeholder="请选择" size="small" onChange={selectChange}>
                {props.options.map(item => <el-option key={item.value} label={item.label} value={item.value} />)}
            </el-select>
            }
            {type === 'radio' && <el-radio-group v-model={select.value} onChange={selectChange}>
                {props.options.map(item => <el-radio key={item.value} label={item.value}>{item.label}</el-radio>)}
            </el-radio-group>}
            {type === 'textarea' && <el-input type="textarea" v-model={props.value} onInput={value => emits('update:value', value)} onBlur={changed}></el-input>}
            {type === 'date' && <el-date-picker v-model={select.value} type="date" placeholder="选择日期" size="small" ></el-date-picker>}
            {type === 'datetime' && <el-date-picker v-model={select.value} type="datetime" placeholder="选择日期" size="small" ></el-date-picker>}
            {type === 'time' && <el-time-picker v-model={select.value} placeholder="选择时间" size="small" ></el-time-picker>}
            {type === 'checkbox' && <el-checkbox-group v-model={select.value} onChange={selectChange}>
                {props.options.map(item => <el-checkbox key={item.value} label={item.value}>{item.label}</el-checkbox>)}
            </el-checkbox-group>}
            {type === 'custom' && props.header.custom && props.header.custom(props.data)}
        </div>
    )
}
</script>

<style scoped></style>